<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">

    <title>Item tracker</title>
  </head>
  <body>
    <div class="container mt-4">
      <div class="row"></div>
      <div class="col"></div>
      <div class="col">
        <h1>Work item</h1>
        {% if error %}
        <div class="alert alert-danger mt-3" role="alert">
          <p>Couldn't {{action}} item '{{item_id}}'.</p>
          <hr>
          <p>{{error}}</p>
        </div>
        {% endif %}
        <form method="POST">
          {% if item_id %}
          <div class="mb-3 row">
            <label for="item_id" class="col-sm-2 col-form-label">ID</label>
            <div class="col-sm-10">
              <input type="text" disabled readonly class="form-control-plaintext" id="item_id" name="item_id" value="{{item_id}}">
            </div>
          </div>
          {% endif %}
          <div class="mb-3">
            <label for="name" class="form-label">Name</label>
            <input type="text" class="form-control" id="name" placeholder="My item" name="name" value="{{name}}" autofocus>
          </div>
          <div class="mb-3">
            <label for="description" class="form-label">Description</label>
            <textarea class="form-control" id="description" name="description" rows="3">{{description}}</textarea>
          </div>
          <div class="mb-3">
            <label for="status" class="form-label">Status</label>
            <select class="form-select" id="status" name="status" aria-label="Status">
              <option {% if status == 'Open' %}selected{% endif %} value="Open">Open</option>
              <option {% if status == 'Archived' %}selected{% endif %} value="Archived">Archived</option>
              {% if item_id %}
              <option {% if status == 'Closed' %}selected{% endif %} value="Closed">Closed</option>
              {% endif %}
            </select>
          </div>
          {% if created_date %}
          <div class="mb-3 row">
            <label for="created_date" class="col-sm-2 col-form-label">Created</label>
            <div class="col-sm-10">
              <input type="text" disabled readonly class="form-control-plaintext" id="created_date" value="{{formatted_date}}">
            </div>
          </div>
          {% endif %}
          <button type="submit" class="btn btn-primary">{% if item_id %}Update{% else %}Add{% endif %}</button>
          <a class="btn btn-primary" href="/items">Cancel</a>
        </form>
      </div>
      <div class="col"></div>
    </div>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script>
  </body>
</html>
